<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-11 14:04:15
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-02-03 15:20:49
 * @FilePath: \mobile\src\pages\CarPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="car">
        <van-nav-bar :title="`购物车${dataList.data.length}`" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- <CarData v-if="dataList.data.length"></CarData> -->
        <van-swipe-cell v-for="(item, index) in dataList.data" :key="item" v-if="dataList.data.length">
            <div class="check">
                <van-checkbox v-model="item.flag" @click="changCardata(index)" />
                <van-card :price="item.originprice" :title="item.proname" class="goods-card" :thumb="item.img1">
                    <template #num>
                        <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                            @plus="incNum(index)" @minus="decNum(index)" />
                    </template>
                </van-card>
            </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="remove(index)" />
            </template>
        </van-swipe-cell>
        <van-empty description="购物车暂无内容" v-else />
        <van-divider>可能还想要</van-divider>
        <van-submit-bar :price="totalprice * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
            <template #tip>
                <span @click="onClickLink"></span>
            </template>
        </van-submit-bar>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in picList.pic" :key="item" @click="buy(item.proid)">
                <img v-lazy="item.img1" alt="">
                <div class="text">{{ item.proname }}</div>
                <div class="price">￥{{ item.originprice }}</div>
            </van-cell>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant';
import { ref, reactive, computed, onMounted } from 'vue'
import { getLike, checkCar, checkCarAlldata, removeCar, checkCardata, numChange } from '../services';
import { router } from '../router';
import { isTemplateNode } from '@vue/compiler-core';

const onSubmit = () => showToast('点击按钮');
const onClickLink = () => showToast('修改地址');

//获取推荐数据
const picList = reactive({ pic: [] } as any)
const loading = ref(false);
const finished = ref(false);
const a = ref(1)
const onLoad = async () => {
    const { data } = await getLike(a.value++)
    data.data.forEach((_item: []) => {
        picList.pic.push(_item)
    })
    loading.value = false
    if (data.data.length === 0) finished.value = true
}
//购物车
const dataList = reactive({ data: [] } as any)
const totalprice = computed(() => {
    return dataList.data.reduce((sum: number, item: {
        flag: any; originprice: number; discount: number; num: number;
    }) => {
        if (item.flag) {
            sum += item.originprice * item.num
        }

        return sum
    }, 0)
})
onMounted(() => {
    checkData()
})

//请求数据
const checkData = async () => {
    const { data } = await checkCar()
    dataList.data = data.data
}

//全选
const checked = computed({
    get() {
        return dataList.data.every((item: { flag: boolean; }) => item.flag === true)
    },
    async set(val) {
        if (val) {
            await checkCarAlldata(true)
        } else {
            await checkCarAlldata(false)
        }
        checkData()
    }
})

//选中
const changCardata = async (index: any) => {
    await checkCardata(dataList.data[index].cartid, dataList.data[index].flag)
    checkData()
}

//删除购物车单条数据
const remove = async (index: any) => {
    await removeCar(dataList.data[index].cartid)
    dataList.data.splice(index, 1)
    checkData()
}

//更新数量
const incNum = async (index: any) => {
    await numChange(dataList.data[index].cartid, dataList.data[index].num + 1)
    checkData()
}
const decNum = async (index: any) => {
    await numChange(dataList.data[index].cartid, dataList.data[index].num - 1)
    checkData()
}


//跳转
const buy = (id: string) => {
    router.push('/detail?id=' + id)
}

//返回上一级
const onClickLeft = () => history.back();
</script>

<style lang=scss scoped>
.car {
    height: 100%;
    background-color: rgb(224, 224, 224);

    .van-nav-bar {
        position: sticky;
        top: 0;
    }


    .van-divider {
        padding: 10px;
    }

    .van-list {
        display: flex;
        flex-wrap: wrap;

        .van-cell {
            width: 50%;
            height: 280px;
            flex-direction: column-reverse;

            .text {
                position: absolute;
                bottom: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis; //文本超出省略号替代
                text-align: left;


            }

            .price {
                color: red;
                position: absolute;
                bottom: 0;
            }

            img {
                width: 100%;
                height: 70%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
}

.van-swipe-cell {

    .check {

        background-color: white;
        display: flex;

        .van-checkbox {
            flex-shrink: 1;
            width: 8%;
            margin-left: 10px;
        }
    }

    .goods-card {
        flex-shrink: 1;
        width: 100%;
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }
}
</style>